分享人:覃腾波
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
在解释什么是BFC之前,需要先介绍BOX、Formatting Context的概念
Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性,决定了这个 Box 的类型。 不同类型的 Box, 会参与不同的 Formatting Context(一个决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染。
让我们看看有哪些盒子:
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
自适应两栏布局
上面中的例子我们可以看出,每个元素的margin box的左边与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此
因此,虽然存在浮动的元素aslide,但main的左边依然会与包含块的左边相接触。
清除内部浮动
根据BFC布局规则第六条:计算BFC的高度时,浮动元素也参与计算
为了清除内部浮动,我们可以触发par生成BFC,那么par在计算高度时,par内部的浮动元素child也会参与计算
防止垂直margin重叠
Haha
Hehe
两个p之间的距离为100px,发送了margin重叠
根据BFC布局规则第二条:Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
我们可以在p外面包裹一层容器,并触发该容器生成一个BFC。那么两个P便不属于同一个BFC,就不会发生margin重叠了。
Haha
Hehe
其实以上的几个例子都体现了BFC布局规则第五条:BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
因为BFC内部的元素和外部的元素绝对不会互相影响,因此, 当BFC外部存在浮动时,它不应该影响BFC内部Box的布局,BFC会通过变窄,而不与浮动有重叠。同样的,当BFC内部有浮动时,为了不影响外部元素的布局,BFC计算高度时会包括浮动的高度。 避免margin重叠也是这样的一个道理。
参考一:前端精选文章
感谢大家观看
BY : 吴江峰 | 覃腾波